/**
 * Created by huotaol on 2017/6/7.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../../common/style/CustomStyle";

export default class CheckDescriptionItem extends Component {
    static propTypes = {
        click: PropTypes.func,
        image: PropTypes.any,
        title: PropTypes.string,
        normalNum: PropTypes.number,
        exceptionNum: PropTypes.number,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <TouchableOpacity
                onPress={this.props.click}
                style={{
                    height: CustomStyle.getActualSizeInVertical(88),
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                }}>

                <View style={{flexDirection: 'row', alignItems: 'center',}}>
                    <Image source={this.props.image}
                           style={{
                               width: CustomStyle.getActualSizeInHorizontal(50),
                               height: CustomStyle.getActualSizeInVertical(50),
                               resizeMode: 'contain',
                           }}/>
                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(30),
                        color: '#4a3d18',
                        marginLeft: CustomStyle.getActualSizeInHorizontal(30),
                    }]}>{this.props.title}</Text>
                </View>

                <View style={{flexDirection: 'row', alignItems: 'center',}}>
                    {this._renderCheckItemNum(this.props.exceptionNum, require('../../../../img/cardetail/exception.png'))}
                    {this._renderCheckItemNum(this.props.normalNum, require('../../../../img/cardetail/normal.png'),
                        style = {marginLeft: CustomStyle.getActualSizeInHorizontal(40),})}
                    <Image source={require('../../../../img/cardetail/arrow_right_big.png')}
                           style={{
                               width: CustomStyle.getActualSizeInHorizontal(18),
                               height: CustomStyle.getActualSizeInVertical(32),
                               marginLeft: CustomStyle.getActualSizeInHorizontal(40),
                           }}/>
                </View>
            </TouchableOpacity>
        )
            ;
    }

    _renderCheckItemNum(num, image, style) {
        if (num > 0) {
            return <View style={[style, {alignItems: 'center', flexDirection: 'row',}]}>
                <Text
                    style={[CustomStyle.baseText, styles.checkItemText]}>{num}</Text>
                <Image
                    resizeMode={'contain'}
                    source={image} style={{
                    height: CustomStyle.getActualSizeInVertical(30),
                    width: CustomStyle.getActualSizeInHorizontal(30),
                    marginLeft: CustomStyle.getActualSizeInHorizontal(10),
                }}/>
            </View>;
        }
    }
}

const styles = StyleSheet.create({

    checkItemText: {
        fontSize: CustomStyle.getActualFontSize(30),
        color: '#857e6e',
    },
});
